<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="../common/common.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/page.css">

<link  rel="stylesheet"
href="${pageContext.request.contextPath}/static/zTree3.3/css/zTreeStyle/zTreeStyle.css"
type="text/css">
<title><spring:message code='role.list'/></title>
<script  type="text/javascript"
src="${pageContext.request.contextPath}/static/zTree3.3/js/jquery.ztree.core-3.5.js">
</script>
<script  type="text/javascript"
src="${pageContext.request.contextPath}/static/zTree3.3/js/jquery.ztree.excheck-3.5.js">
</script>
<link  rel="stylesheet"
href="${pageContext.request.contextPath}/static/zTree3.3/css/zTreeStyle/zTreeStyle.css"
type="text/css">

<script type="text/javascript">
var _gridWidth;
var _gridHeight;
//页面自适应
function resizePageSize(){
	_gridWidth = $(document).width()-12;/*  -189 是去掉左侧 菜单的宽度，   -12 是防止浏览器缩小页面 出现滚动条 恢复页面时  折行的问题 */
	_gridHeight = $(document).height()-32-80; /* -32 顶部主菜单高度，   -90 查询条件高度*/
}
function rowDbclick(r){
	$(r).dblclick(
	 function() {
		 var columnsArray = $(r).attr('ch').split("_FG$SP_");
		 $("#roleName_mod").val(columnsArray[2]);
		 $("#roleUUID_mod").val(columnsArray[0]);
		 $("#remarks_mod").val(columnsArray[1]);
		 $("#updateRoleDailDialog").dialog("open");
	 });
	
}


$(function()
{
	resizePageSize();
	var _columnWidth= (_gridWidth-150)/2;
	
	$("#flexiGridID").flexigrid({
		width : _gridWidth,
		height : _gridHeight,
		url : "${pageContext.request.contextPath}/role/getRoleList",
		dataType : 'json',
		colModel : [ 
		   {display : 'ID',name : 'roleUUID',width : 150,sortable : false,align : 'center',hide : 'true'}, 
           {display : "<spring:message code='role.name'/>",name : 'roleName',width : _columnWidth, sortable : true,align : 'center'},
			{display : "<spring:message code='role.remarks'/>",name : 'remarks',width : _columnWidth, sortable : true,align : 'center'},
		],
		resizable : false, //resizable table是否可伸缩
		usepager : true,
		useRp : true,
		usepager : true, //是否分页
		autoload : false, //自动加载，即第一次发起ajax请求
		hideOnSubmit : true, //是否在回调时显示遮盖
		showcheckbox : true, //是否显示多选框
		rowhandler : rowDbclick, //是否启用行的扩展事情功能,在生成行时绑定事件，如双击，右键等
		rowbinddata : true,
		numCheckBoxTitle : "<spring:message code='common.selectall'/>"
	});	
	
	query();
	
	
	
	$("#addBtn").click(function( event ) {
        //message("增加页面");
        //重置增加弹出框，让上一次写的内容消失
        $("#addRoleDailFormId").resetForm();
        $("#addRoleDailDialog").dialog( "open" );
        
	});
	
	$("#queryBtn").click(function( event ) {
		var searchRemarks = $("#searchRemarks").val();
		var searchRole_name = $("#searchRoleName").val();
		query([{"name": "searchRemarks","value":searchRemarks},
		       {"name": "searchRoleName","value":searchRole_name}]);
	});
	
	$("#delBtn").click(function( event ) {
		
		var ids = searchTableColumn($("#flexiGridID"),0);
		if(ids.length===0){
			message("<spring:message code='common.empty'/>");
			return;
		}
		if(ids.length > 1){
			message("<spring:message code='role.cancel.role'/>");
			return;
		}
			$.ajax({
				type : 'POST',
				url : '${pageContext.request.contextPath}/role/deleteRoleInfo',
				dataType : 'json',
				cache : false,
				data : [ {
					name : 'roleuuid',
					value : ids
				} ],
				success : function(data) {
					$('#flexiGridID').flexReload();
					message(data.msg);
				},
				error : function() {
					message("<spring:message code='common.error'/>");
				}
			});

	});
	

	$( "#updateRoleDailDialog" ).dialog({
		autoOpen : false,
		width : 400,
		modal : true,
		resizable : false,
		title: "<spring:message code='common.update.title'/>",
		buttons: [
			{
				text: "<spring:message code='common.confirm'/>",
				click: function() {	
					$("#updateRoleDailFormId").submit();
				}
			},
			{
				text: "<spring:message code='common'/>",
				click: function() {
					$( this ).dialog( "close" );
				}
			}
		]
	});
	
	$('#updateRoleDailFormId').ajaxForm({
		dataType: "json",
		success : function(data) {
			$('#flexiGridID').flexReload();
			$("#updateRoleDailDialog").dialog( "close" )
	     },
	     error : function() {
			 message("<spring:message code='common.error'/>");
	     },
		complete : function(response, status) {
	     
		}
	});

	$( "#addRoleDailDialog" ).dialog({
		autoOpen : false,
		width : 400,
		modal : true,
		resizable : false,
		title: "<spring:message code='role.add'/>",
		buttons: [
			{
				text: "<spring:message code='common.confirm'/>",
				click: function() {
					var addRoleUuid = $("#addRoleUuid");
					var addRemarks = $("#addRemarks");
					var addRoleName = $("#addRoleName");
					var bValid = true;
					//对值的校验
					var allFields = $([]).add(addRoleUuid).add(addRemarks).add(addRoleName);
					allFields.removeClass("ui-addRoleUuid-error");
					//allFields.removeClass("ui-state-error");
					//bValid = bValid && checkLength(addRoleUuid, 1, 255);
					bValid = bValid && checkLength(addRemarks, 1, 32);
					bValid = bValid && checkLength(addRoleName, 1, 16);
										
					if(!bValid){
						return;
					}
					
					$("#addRoleDailFormId").submit();
					message("<spring:message code='organ.add.success'/>");
	
				}
			},
			{
				text: "<spring:message code='common.cancel'/>",
				click: function() {
					$( this ).dialog( "close" );
				}
			}
		]
	});


	$('#addRoleDailFormId').ajaxForm({
		dataType: "json",
		success : function(data) {
			$('#flexiGridID').flexReload();
			$("#addRoleDailDialog").dialog( "close" )
			message(data.msg);
	     },
	     error : function() {
	        message("<spring:message code='common.error'/>");
	     },
		complete : function(response, status) {
	     
		}
	});
	
	//角色授权
	$("#shouquanBtn").click(function( event ) {
		var ids = searchTableColumn($("#flexiGridID"),0);
		if(ids.length===0){
			message("<spring:message code='common.empty'/>");
           return;
		}
		if(ids.length > 1){
			message("<spring:message code='role.grant.error'/>");
            return;
        }

		$.ajax({
			type : 'POST',
			url : '${pageContext.request.contextPath}/role/queryRoleMenuInfoZtreeList',
			dataType : 'json',
			cache : false,
			data : [
                {name : 'roleuuid', value : ids}
			],
			success : function(data) {
				$.fn.zTree.init($("#roleTreeID"), setting, data);
			},
			error : function() {
				message("<spring:message code='common.error'/>");
			}
		});


			var setting = {

				check: {
						enable: true,
						chkStyle: "checkbox",
						chkboxType: { "Y": "ps", "N": "ps" }
						},
				 data: {
						simpleData: {
							enable: true}
						},
				callback : {
					onClick : onClickNode
			}
		};
				 //回调函数
			   	$("#menuTreeID").dialog( "open" );

	});

	$( "#menuTreeID" ).dialog({
		autoOpen : false,
		width : 400,
		modal : true,
		resizable : false,
		title: "<spring:message code='role.grant'/>",
		buttons: [
			{
				text: "<spring:message code='confirm'/>",
				click: function() {
					var ps = [];
	            	var treeObj=$.fn.zTree.getZTreeObj("roleTreeID");
	           		var	nodes=treeObj.getCheckedNodes(true);

					if(nodes && nodes.length >0) {
						for (var i = 0; i < nodes.length; i++) {
							ps[i] = nodes[i].id;
						}
					}
					var ids = searchTableColumn($("#flexiGridID"),0);
						$.ajax({
							type : 'POST',
							url : '${pageContext.request.contextPath}/role/grantRole',
							dataType : 'json',
							cache : false,
							data : [
								{name : 'roleuuid', value : ids},
								{name : 'mid', value : ps}
							],
							success : function(data) {
								$('#flexiGridID').flexReload();
								$("#menuTreeID").dialog( "close" );
								message(data.msg);


							},
							error : function() {
								message("<spring:message code='common.error'/>");
							}
						});

					}
			},
			{
				text: "<spring:message code='common'/>",
				click: function() {
					$( this ).dialog( "close" );
				}
			}
		]
	});


});




function query(param1){
	$('#flexiGridID').flexOptions({
		newp: 1,
		extParam: param1||[],
    	url: '${pageContext.request.contextPath}/role/getRoleList'
    }).flexReload();
}


//将节点保存到数据库
function onClickNode(event, treeId, treeNode)
{
	console.info(treeNode.id);
	query([{name:"parentId",value:treeNode.id}]);
}

</script>

</head>
<body>
<div style="padding-top: 5px;">
<label><spring:message code="role.name"/>:</label> <input type="text" id="searchRoleName"/>
<label><spring:message code="role.remarks"/>:</label> <input type="text" id="searchRemarks"/>

<a href="#" id="queryBtn" class="ui-state-default ui-corner-all cbe-button"><span class="ui-icon ui-icon-search"></span><spring:message code="role.query"/></a>
<a href="#" id="delBtn" class="ui-state-default ui-corner-all cbe-button"><span class="ui-icon ui-icon-minusthick"></span><spring:message code="role.delete"/></a>
<a href="#" id="addBtn" class="ui-state-default ui-corner-all cbe-button"><span class="ui-icon ui-icon-plus"></span><spring:message code="role.add"/></a>
<a href="#" id="shouquanBtn" class="ui-state-default ui-corner-all cbe-button"><span class="ui-icon ui-icon-plus"></span><spring:message code="role.authorization"/></a>
</div>
<div class="tbl">
   <table id="flexiGridID" style="display: block;margin: 0px;"></table>
</div>
 <div id="updateRoleDailDialog" style="display: none;">
	<form id="updateRoleDailFormId" action="${pageContext.request.contextPath}/role/updateRoleDail" method="post" >
	    <input type="hidden" id="roleUUID_mod" name="roleUuid" />
	    <!-- hidden -->
         <table >
	   	 	 <tr>
	   	 	  	<td class="fileName">
	   	 	  		<label><spring:message code="role.name"/></label>
	   	 	  	</td>
	   	 	  	<td class="fileValue" >
	   	 	  		<input type="text" id="roleName_mod" name="roleName" />
	   	 	  		<span class="mand">*</span>
	   	 	  	</td>
	   	 	  </tr>
	   	 	  <tr>
	   	 	  	<td class="fileName">
	   	 	  		<label><spring:message code="role.remarks2"/></label>
	   	 	  	</td>
	   	 	  	<td class="fileValue" >
	   	 	  		<textarea cols="18" rows="5" id="remarks_mod" name="remarks"></textarea>
	   	 	  	</td>
	   	 	  </tr>
	 
	   	 </table>
	   </form>  
   </div>
   
 <div id="addRoleDailDialog" style="display: none;">
	<form id="addRoleDailFormId" action="${pageContext.request.contextPath}/role/addRole" method="post" >
	    <table >
              <tr>
	   	 	  	<td class="fileName">
	   	 	  		<label><spring:message code ="role.name"/></label>
	   	 	  	</td>
	   	 	  	<td class="fileValue" >
	   	 	  		<input type="text" id="addRoleName" name="roleName" />
					
	   	 	  		<span class="mand">*</span>
	   	 	  	</td>
	   	 	  </tr>
				<tr>
					<td class="fileName">
						<label><spring:message code ="role.remarks"/></label>
					</td>
					<td class="fileValue" >
						<input type="text" id="addRemarks" name="remarks" />
						<span class="mand">*</span>
					</td>
				</tr>
	   	 </table>
	   </form>  
   </div>

   <!-- 权限树 -->
 <div id="menuTreeID" class="zTreeDemoBackground left"
		title="<spring:message code="role.authorization"/>"  align="center"
		style="display: none;">
		<ul id="roleTreeID" class="ztree"></ul>
	</div>
</body>
</html>